<template>
    <div class="main-container">
        <!-- 侧边栏目录 -->
        <aside class="sidebar">
            <h2>目录</h2>
            <div class="sidebar-content">
                <div v-for="(volume, volumeIndex) in fullVolumes" :key="volumeIndex" class="volume-sidebar">
                    <h3 @click="toggleVolume(volumeIndex)" class="volume-title-sidebar">
                        {{ volume.title }} <span
                            :class="['toggle-icon', { active: isVolumeOpen[volumeIndex] }]">▼</span>
                    </h3>
                    <ul v-if="isVolumeOpen[volumeIndex]" class="chapter-list-sidebar">
                        <li v-for="(chapter, chapterIndex) in volume.chapters" :key="chapterIndex"
                            class="chapter-item-sidebar">
                            <RouterLink :to="getChapterRoute(chapterIndex + 1)">
                                {{ chapter }}
                            </RouterLink>
                        </li>
                    </ul>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <div class="book-container">
            <button class="back-button" @click="goBack">返回</button>

            <!-- 书籍封面展示 -->
            <div class="book-cover">
                <img src="@/assets/img/kuangren.jpg" alt="狂人日记封面" class="cover-image">
            </div>

            <!-- 书籍基本信息 -->
            <div class="book-info">
                <h1 class="title">《狂人日记》</h1>
                <div class="metadata">
                    <p class="author">鲁迅 著</p>
                    <p class="publisher">人民文学出版社出版</p>
                    <p class="isbn">ISBN: 978-7-0200-0000-0</p>
                </div>
            </div>

            <!-- 书籍简介 -->
            <section class="synopsis">
                <h2>内容简介</h2>
                <p class="description">
                    《狂人日记》是鲁迅创作的第一篇白话小说，也是中国现代文学史上第一篇白话小说。通过一个“狂人”的视角，揭露封建礼教“吃人”的本质，表达了对旧社会制度的深刻批判和对人性觉醒的呼唤。
                </p>
            </section>

            <!-- 分卷展示 -->
            <div class="volumes">
                <div v-for="(volume, volumeIndex) in volumes" :key="volumeIndex" class="volume-card">
                    <h3 class="volume-title">{{ volume.title }}</h3>
                    <ul class="chapter-list">
                        <li v-for="(chapter, chapterIndex) in volume.chapters" :key="chapterIndex"
                            @click="selectChapter(volumeIndex, chapterIndex)" class="chapter-item">
                            {{ chapter }}
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <RouterLink to="/book01/santi-book01" target="_blank">
                    <button class="purchase-btn">开始阅读</button>
                </RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回首页方法
const goBack = () => {
    router.push("/")
}

// 完整章节列表
const fullVolumes = [
    {
        title: '正文',
        chapters: [
            '序言', '一月十三日', '一月十六日', '一月十七日', '一月二十日',
            '一月二十一日', '一月二十二日', '一月二十四日', '一月二十五日', '一月二十六日',
            '一月二十七日', '一月三十日', '一月三十一日', '二月一日', '二月六日',
            '尾声'
        ]
    }
]

// 分卷展示，每个卷只显示三个章节
const volumes = reactive([
    {
        title: '正文',
        chapters: fullVolumes[0].chapters.slice(0, 3)
    }
])

const isVolumeOpen = ref([false])

const toggleVolume = (index) => {
    isVolumeOpen.value[index] = !isVolumeOpen.value[index]
}

// 章节选择逻辑
const selectChapter = (volumeIndex, chapterIndex) => {
    console.log(`选中第${volumeIndex + 1}卷 第${chapterIndex + 1}章`)
}

// 生成章节的路由地址
const getChapterRoute = (chapterNumber) => {
    return `/book01/santi-book${chapterNumber.toString().padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.main-container {
    display: flex;
    padding: 0;
    height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
    width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    z-index: 100;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;

    h2 {
        color: #34495e;
        margin-bottom: 1.5rem;
        font-size: 1.3rem;
        border-bottom: 2px solid #ecf0f1;
        padding-bottom: 0.5rem;
    }

    .volume-sidebar {
        margin-bottom: 1.5rem;
    }

    .volume-title-sidebar {
        color: #16a085;
        margin-bottom: 0.5rem;
        cursor: pointer;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .toggle-icon {
            transition: transform 0.3s;
            font-size: 0.8rem;
        }

        .toggle-icon.active {
            transform: rotate(180deg);
        }
    }

    .chapter-list-sidebar {
        list-style: none;
        padding: 0;
        margin-left: 1rem;

        .chapter-item-sidebar {
            padding: 0.4rem 0;
            margin: 0.3rem 0;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.95rem;
            color: #666;

            a {
                text-decoration: none;
                color: inherit;
                transition: color 0.2s;
            }

            &:hover {
                color: #27ae60;
            }
        }
    }
}

/* 主内容区调整 */
.book-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 2rem 2rem 320px;
    font-family: 'Segoe UI', '思源宋体', sans-serif;
    color: #333;
    position: relative;
}

/* 已有的样式保持不变 */
.back-button {
    position: absolute;
    top: 20px;
    left: 100px;
    padding: 8px 16px;
    background: #f1f2f6;
    border: 1px solid #dcdde1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;

    &:hover {
        background: #dfe4ea;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

.book-cover {
    text-align: center;
    margin-bottom: 2rem;

    .cover-image {
        max-height: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

.book-info {
    text-align: center;
    margin-bottom: 3rem;

    .title {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 1rem;
    }

    .metadata {
        font-size: 1.1rem;
        color: #666;
        line-height: 1.6;
    }
}

.synopsis {
    margin-bottom: 3rem;

    h2 {
        color: #34495e;
        border-bottom: 2px solid #ecf0f1;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }

    .description {
        line-height: 1.8;
        text-indent: 2em;
    }
}

.volumes {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    .volume-card {
        background: #f8f9fa;
        padding: 1.5rem;
        border-radius: 8px;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-5px);
        }

        .volume-title {
            color: #16a085;
            margin-bottom: 1rem;
        }

        .chapter-list {
            list-style: none;
            padding: 0;

            .chapter-item {
                padding: 0.5rem;
                margin: 0.3rem 0;
                cursor: pointer;
                transition: all 0.2s;
                border-radius: 4px;

                &:hover {
                    background: #e8f6f3;
                    color: #27ae60;
                }
            }
        }
    }
}

.action-buttons {
    text-align: center;
    margin-top: 3rem;

    .purchase-btn {
        background: #e74c3c;
        color: white;
        padding: 1rem 3rem;
        border: none;
        border-radius: 25px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
            background: #c0392b;
        }
    }
}

/* 响应式调整 */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .book-container {
        padding-left: 2rem;
    }

    .back-button {
        left: 5px;
    }
}
</style>